<!-- 能源双控进度 -->

<template>
  <div class="flex flex-col w-100% p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card-1 -->
    <div class="flex-1 flex flex-col mb-10px" style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
      <div class="flex justify-between items-center h-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">石化基地能耗总量控制分析</span>

        <div class="flex items-center">
          <div class="mr-20px">
            <span class="mr-11px text-[#333] text-14px">选择能源类型</span>
            <el-select v-model="nylx" placeholder="请选择能源类型">
              <el-option v-for="(item, index) in nylxList" :key="index" :label="item.mc" :value="item.dm" />
            </el-select>
          </div>
          <div class="mr-20px">
            <span class="mr-11px text-[#333] text-14px">选择时间</span>
            <el-date-picker v-model="zlkzfxDate" type="year" value-format="YYYY" placeholder="选择时间" />
          </div>
          <el-button type="primary" class="w-80px rounded-15px" :icon="Search" @click="queryZL">查询</el-button>
          <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="restartZL">重置</el-button>
        </div>
      </div>
      <div class="w-100% flex-1 flex">
        <div class="w-20%">
          <Echarts ref="zlkzfxEchart1"></Echarts>
        </div>
        <div class="flex-1">
          <Echarts ref="zlkzfxEchart2"></Echarts>
        </div>
      </div>
    </div>

    <!-- card-2 -->
    <div class="flex-1 flex flex-col mb-10px" style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
      <div class="flex justify-between items-center h-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">石化基地能耗强度控制分析</span>

        <div class="flex items-center">
          <div class="mr-20px">
            <span class="mr-11px text-[#333] text-14px">选择时间</span>
            <el-date-picker v-model="formInlineQD" type="year" value-format="YYYY" placeholder="选择时间" />
          </div>
          <el-button type="primary" class="w-80px rounded-15px" :icon="Search" @click="queryQD">查询</el-button>
          <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="restartQD">重置</el-button>
        </div>
      </div>
      <div class="w-100% flex-1 flex">
        <div class="w-20%">
          <Echarts ref="QDEchart1"></Echarts>
        </div>
        <div class="flex-1">
          <Echarts ref="QDEchart2"></Echarts>
        </div>
      </div>
    </div>

    <!-- card-3 -->
    <div class="flex-1 flex flex-col" style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
      <div class="flex justify-between items-center h-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">各企业能耗双控分析</span>

        <div class="flex items-center">
          <div class="mr-20px">
            <span class="mr-11px text-[#333] text-14px">选择选择企业</span>
            <el-select v-model="qyid" placeholder="请选择选择企业">
              <el-option v-for="(item, index) in qylbList" :key="index" :label="item.qymc" :value="item.id" />
            </el-select>
          </div>
          <div class="mr-20px">
            <span class="mr-11px text-[#333] text-14px">选择时间</span>
            <el-date-picker v-model="formInlineSK" type="year" format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择时间" />
          </div>
          <el-button type="primary" class="w-80px rounded-15px" :icon="Search" @click="querySK">查询</el-button>
          <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="restartSK">重置</el-button>
        </div>
      </div>
      <div class="w-100% flex-1 flex">
        <div class="flex-1">
          <Echarts ref="SKEchart1"></Echarts>
        </div>
        <div class="flex-1">
          <Echarts ref="SKEchart2"></Echarts>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import moment from 'moment'
import { ElMessage } from 'element-plus'
import { Search, Refresh, Plus, Download } from '@element-plus/icons-vue'

/** 石化基地能耗总量控制分析 start */
const zlkzfxEchart1 = ref(null) as any
const zlkzfxEchart2 = ref(null) as any
const nylxList = ref([
  {
    dm: '1',
    mc: '水务',
  },
  {
    dm: '2',
    mc: '电力',
  },
  {
    dm: '3',
    mc: '蒸汽',
  },
  {
    dm: '4',
    mc: '燃气',
  },
  {
    dm: '5',
    mc: '用煤',
  },
])
const qylbList = ref([])

const nylx = ref('1')
const qyid = ref('2542a9c53a8147278cb00d79c9357139')

const zlkzfxDate = ref(moment().format('YYYY'))
const card1Option2 = {
  grid: {
    top: 40,
    left: 30,
    right: 60,
    bottom: 20,
  },
  title: {
    text: '能耗量/万tce',
    left: 'center',
    textStyle: {
      fontWeight: 'normal',
    },
  },
  legend: {
    data: ['月度能耗量', '累计能源使用率'],
    left: 'left',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow',
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
    {
      type: 'value',
      axisLabel: {
        formatter: '{value} %',
      },
    },
  ],
  series: [
    {
      name: '月度能耗量',
      type: 'bar',
      barWidth: 14,
      borderRadius: '25%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#47cecd' },
          { offset: 1, color: '#03a3a2' },
        ]),
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          animation: false,
        },
        backgroundColor: 'rgba(16,16,52,0.6)',
        textStyle: {
          color: 'white',
        },
      },
      data: [540, 540, 540, 540, 540, 540, 540, 540, 540, 540, 540, 540],
    },
    {
      name: '累计能源使用率',
      type: 'line',
      yAxisIndex: 1,
      itemStyle: {
        normal: {
          color: '#0F86E8',
          lineStyle: {
            color: '#0F86E8',
          },
        },
      },
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ' °C'
        },
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
    },
  ],
}

// 查询总量
const queryZL = () => {
  queryNyylTjFx({ nf: zlkzfxDate.value, nylx: nylx.value })
    .then((res: any) => {
      const xx = res.nhzlFxInfos && res.nhzlFxInfos[res.nhzlFxInfos.length - 1].ljnysyl
      //饼状图
      const card1Option1 = {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        },

        title: {
          text: '能耗总量',
          x: '48%',
          y: '30%',
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 20,
            color: '#333',
          },

          subtext: `{val1|${res.nhzlsjz || 0}}{val2|万tce}`,
          subtextStyle: {
            rich: {
              val1: {
                fontSize: 50,
                fontFamily: 'CenturyGothic',
                color: '#02A7F0',
                verticalAlign: 'bottom',
                padding: [10, 0, -10, 0],
              },
              val2: {
                fontSize: 18,
                color: '#333',
                fontWeight: 'bold',
                verticalAlign: 'bottom',
              },
            },
          },
        },
        series: [
          {
            type: 'gauge',
            center: ['50%', '65%'],
            radius: '130%',
            startAngle: 200,
            endAngle: -20,
            axisLine: {
              show: true,
              lineStyle: {
                width: 30,
                color: [
                  [xx, '#02a7f0'],
                  [1, '#cedbe1'],
                ],
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              padding: [0, 0, 0, 0],
              formatter: `{text|能源使用率} {val|{value}%}`,
              rich: {
                text: {
                  fontSize: 18,
                  color: '#333',
                  fontWeight: 'bold',
                },
                val: {
                  fontSize: 28,
                  color: '#70B603',
                  fontWeight: 'bold',
                },
              },
            },
            data: [
              {
                value:
                  (res.nhzlFxInfos && res.nhzlFxInfos[res.nhzlFxInfos.length - 1].ljnysyl * 100) ||
                  0,
              },
            ],
          },
        ],
      }
      zlkzfxEchart1.value.initEchat(card1Option1)

      //柱状图
      card1Option2.xAxis[0].data = res.sjList
      const transformedData =
        res.nhzlFxInfos &&
        Object.keys(res.nhzlFxInfos[0]).reduce((result: any, key: any) => {
          if (key === 'ydnhl') {
            result.push({
              name: '月度能耗量',
              type: 'bar',
              barWidth: 14,
              borderRadius: '25%',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#47cecd' },
                  { offset: 1, color: '#03a3a2' },
                ]),
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  animation: false,
                },
                backgroundColor: 'rgba(16,16,52,0.6)',
                textStyle: {
                  color: 'white',
                },
              },
              data: res.nhzlFxInfos.map((item: any) => item[key].toFixed(2)),
            })
          } else if (key === 'ljnysyl') {
            result.push({
              name: '累计能源使用率',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#0F86E8',
                  lineStyle: {
                    color: '#0F86E8',
                  },
                },
              },
              tooltip: {
                valueFormatter: function (value: any) {
                  return value + '%'
                },
                trigger: 'axis',
                axisPointer: {
                  animation: false,
                },
                backgroundColor: 'rgba(16,16,52,0.6)',
                textStyle: {
                  color: 'white',
                },
              },
              data: res.nhzlFxInfos.map((item: any) => item[key] * 100),
            })
          }

          return result
        }, [])
      card1Option2.series = transformedData

      //没数据给个提示
      if (res.nhzlFxInfos == null || res.nhzlFxInfos == undefined || res.nhzlFxInfos.length <= 0) {
        card1Option2.graphic = [
          {
            type: 'text',
            left: 'center',
            top: 'middle',
            style: {
              fill: '#999',
              text: '暂无数据',
              font: '14px Microsoft YaHei',
            },
          },
        ]
      }

      zlkzfxEchart2.value.initEchat(card1Option2)
    })
    .catch((error) => {
      ElMessage({
        message: '操作失败! ' + error?.response?.data?.result?.resultMessage,
        type: 'error',
      })
    })
}
//重置
const restartZL = () => {
  nylx.value = '1'
  zlkzfxDate.value = moment().format('YYYY')
  queryZL()
}
// card1 echarts

/** 石化基地能耗总量控制分析 end */

// card2 echarts
const QDEchart1 = ref(null) as any
const QDEchart2 = ref(null) as any
//搜索值
const formInlineQD = ref(moment().format('YYYY'))

let nhqdFxInfos: any = []
let sjList: any = []
let nhgd: any = 0
let b1: any = 0
// 查询强度 nhqdjzz
const queryQD = async () => {
  await queryNhqdTjFx({ nf: formInlineQD.value })
    .then((res: any) => {
      nhqdFxInfos = res.nhqdFxInfos
      sjList = res.sjList
      nhgd = res.nhgd || 0
      b1 = res.b1 || 0
    })
    .catch((error) => {
      ElMessage({
        message: '操作失败! ' + error?.response?.data?.result?.resultMessage,
        type: 'error',
      })
    })

  const yData: any = []
  nhqdFxInfos &&
    nhqdFxInfos.forEach((e: any) => {
      yData.push(e.ydnhqd)
    })

  const card2Option1 = {
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
    title: {
      text: '能耗总量',
      x: '48%',
      y: '30%',
      textAlign: 'center',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 20,
        color: '#333',
      },

      subtext: `{val1|${nhgd}}{val2|万tce/GDP}`,
      subtextStyle: {
        rich: {
          val1: {
            fontSize: 50,
            fontFamily: 'CenturyGothic',
            color: '#02A7F0',
            verticalAlign: 'bottom',
            padding: [10, 0, -10, 0],
          },
          val2: {
            fontSize: 18,
            color: '#333',
            fontWeight: 'bold',
            verticalAlign: 'bottom',
            padding: [0, -20, 0, 0],
          },
        },
      },
    },
    series: [
      {
        type: 'gauge',
        center: ['50%', '65%'],
        radius: '130%',
        startAngle: 200,
        endAngle: -20,
        axisLine: {
          show: true,
          lineStyle: {
            width: 30,
            color: [
              [b1, '#7ac800'],
              [1, '#cedbe1'],
            ],
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        pointer: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          padding: [0, 0, 0, 0],
          formatter: `{text|能耗强度/限制强度} {val|{value}%}`,
          rich: {
            text: {
              fontSize: 18,
              color: '#333',
              fontWeight: 'bold',
            },
            val: {
              fontSize: 28,
              color: '#70B603',
              fontWeight: 'bold',
            },
          },
        },
        data: [{ value: b1 }],
      },
    ],
  }

  QDEchart1.value.initEchat(card2Option1)

  const card2Option2: any = {
    grid: {
      top: 50,
      left: 40,
      right: 40,
      bottom: 20,
    },
    title: {
      text: '能耗强度/限制强度',
      left: 'center',
      textStyle: {
        fontWeight: 'normal',
      },
    },
    legend: {
      data: ['能耗强度/限制强度'],
      left: 'left',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        animation: false,
      },
      backgroundColor: 'rgba(16,16,52,0.6)',
      textStyle: {
        color: 'white',
      },
    },
    xAxis: {
      type: 'category',
      data: sjList,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '能耗强度/限制强度',
        data: yData,
        type: 'line',
        itemStyle: {
          normal: {
            color: '#0F86E8',
            lineStyle: {
              color: '#0F86E8',
            },
          },
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          },
        },
      },
    ],
  }

  //没数据给个提示
  if (yData == null || yData == undefined || yData.length <= 0) {
    card2Option2.graphic = [
      {
        type: 'text',
        left: 'center',
        top: 'middle',
        style: {
          fill: '#999',
          text: '暂无数据',
          font: '14px Microsoft YaHei',
        },
      },
    ]
  }

  //初始化
  QDEchart2.value.initEchat(card2Option2)
}
//重置
const restartQD = () => {
  formInlineQD.value = moment().format('YYYY')
  queryQD()
}

// card3 echarts
const SKEchart1 = ref(null) as any
const SKEchart2 = ref(null) as any
//搜索值
const formInlineSK = ref(moment().format('YYYY'))
let nhzljzz = 0
let nhzlsjz = 0
let ljnysyl = 0
let nhqdjzz = 0
let nhqdsjz = 0
let nhqdSjzJzzBl = 0
// 查询双控
const querySK = async () => {
  await queryQyNhskfx({ nf: formInlineSK.value, qyid: qyid.value })
    .then((res: any) => {
      nhzljzz = res.nhzljzz
      nhzlsjz = res.nhzlsjz
      ljnysyl = res.ljnysyl

      nhqdjzz = res.nhqdjzz
      nhqdsjz = res.nhqdsjz
      nhqdSjzJzzBl = res.nhqdSjzJzzBl
    })
    .catch((error) => {
      ElMessage({
        message: '操作失败! ' + error?.response?.data?.result?.resultMessage,
        type: 'error',
      })
    })

  const card3Option1 = {
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },

    title: {
      text: '能耗总量',
      x: '48%',
      y: '30%',
      textAlign: 'center',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 20,
        color: '#333',
      },

      subtext: `{val1|${nhzlsjz}}{val2|万tce}`,
      subtextStyle: {
        rich: {
          val1: {
            fontSize: 50,
            fontFamily: 'CenturyGothic',
            color: '#02A7F0',
            verticalAlign: 'bottom',
            padding: [10, 0, -10, 0],
          },
          val2: {
            fontSize: 18,
            color: '#333',
            fontWeight: 'bold',
            verticalAlign: 'bottom',
          },
        },
      },
    },
    series: [
      {
        type: 'gauge',
        center: ['50%', '65%'],
        radius: '130%',
        startAngle: 200,
        endAngle: -20,
        axisLine: {
          show: true,
          lineStyle: {
            width: 30,
            color: [
              [ljnysyl, '#02a7f0'],
              [1, '#cedbe1'],
            ],
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        pointer: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          padding: [0, 0, 0, 0],
          formatter: `{text|能源使用率} {val|{value}%}`,
          rich: {
            text: {
              fontSize: 18,
              color: '#333',
              fontWeight: 'bold',
            },
            val: {
              fontSize: 28,
              color: '#70B603',
              fontWeight: 'bold',
            },
          },
        },
        data: [{ value: ljnysyl * 100 }],
      },
    ],
  }
  //初始化
  SKEchart1.value.initEchat(card3Option1)

  const card3Option2 = {
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },

    title: {
      text: '能耗总量',
      x: '48%',
      y: '30%',
      textAlign: 'center',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 20,
        color: '#333',
      },

      subtext: `{val1|${nhqdsjz}}{val2|万tce/GDP}`,
      subtextStyle: {
        rich: {
          val1: {
            fontSize: 50,
            fontFamily: 'CenturyGothic',
            color: '#02A7F0',
            verticalAlign: 'bottom',
            padding: [10, 0, -10, 0],
          },
          val2: {
            fontSize: 18,
            color: '#333',
            fontWeight: 'bold',
            verticalAlign: 'bottom',
            padding: [0, -40, 0, 0],
          },
        },
      },
    },
    series: [
      {
        type: 'gauge',
        center: ['50%', '65%'],
        radius: '130%',
        startAngle: 200,
        endAngle: -20,
        axisLine: {
          show: true,
          lineStyle: {
            width: 30,
            color: [
              [nhqdSjzJzzBl, '#7ac800'],
              [1, '#cedbe1'],
            ],
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        pointer: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          padding: [0, 0, 0, 0],
          formatter: `{text|能耗强度/限制强度} {val|{value}%}`,
          rich: {
            text: {
              fontSize: 18,
              color: '#333',
              fontWeight: 'bold',
            },
            val: {
              fontSize: 28,
              color: '#70B603',
              fontWeight: 'bold',
            },
          },
        },
        data: [{ value: nhqdSjzJzzBl * 100 }],
      },
    ],
  }
  //初始化
  SKEchart2.value.initEchat(card3Option2)
}
//重置
const restartSK = () => {
  formInlineSK.value = moment().format('YYYY')
  querySK()
}

//加载企业信息
const getQylb = async () => {
  //查询企业列表
  await queryQylb({ nylx: nylx.value }).then((res: any) => {
    qylbList.value = res
  })
}

//初始化
onMounted(() => {
  queryZL()
  queryQD()
  //企业列表
  getQylb()
  querySK()
})
</script>

<style>
</style>
